<template>
  <div>
      <el-card style="margin:20px 0px;">
        <Menus @setAttributeData='setAttributeData' :Operations='listDisplay == 0'/>
      </el-card>
      <el-card>
        <div v-show='listDisplay === 0'>
          <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="changeSpuDisplay(1,'',idData.threeRegion)" :disabled='tabData.length < 1'>添加SPU</el-button>
          <el-table  border stripe style="margin:20px 0px" :data="tabData.records">
            <el-table-column 
              type="index"
              label="序号"
              :width="100"
              align="center"
              >
            </el-table-column>
            <el-table-column 
              label="spu名称"
              width="width"
              prop="spuName"
              >
            </el-table-column>
            <el-table-column 
              label="spu描述"
              width="width"
              prop="description"
              >
            </el-table-column>
              <el-table-column 
              label="操作"
              width="width"
              >
              <template slot-scope="{row,$index}">
                <HintButton  title="添加SKU" type="success" icon="el-icon-plus" size="small" @click="addSkuList(row)"></HintButton>
                <HintButton  title="修改SPU" type="info" icon="el-icon-edit-outline" size="small" @click="changeSpuDisplay(1,row)"></HintButton>
                <HintButton  title="查看当前实例的全部SKU" type="warning" icon="el-icon-info" size="small" @click="getFindSpuld(row)"></HintButton>
                <el-popconfirm
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗"
                  @onConfirm='getDelData(row)'
                >
                <HintButton  slot="reference" title="删除SKU" type="danger" icon="el-icon-delete" size="small"></HintButton>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              :page-size='limit'
              :page-sizes="[3, 5, 10, 15]"
              layout="prev, pager, next, ->,jumper,total, sizes"
              :total="total"
              style="text-align:center"
              @current-change='getDataList'
              >
            </el-pagination>
        </div>
        <Spuform v-show="listDisplay === 1" ref="SpuForm" :listDisplay='listDisplay'/>
        <Skuform v-show="listDisplay === 2" ref="SkuForm" :listDisplay='listDisplay'/>
      </el-card>
      <el-dialog :title="实例列表" :visible.sync="dialogTableVisible">
        <el-table :data="supData" border v-loading="loading">
            <el-table-column prop="skuName" label="名称"> </el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="weight" label="重量"></el-table-column>
            <el-table-column prop="skuDefaultImg" label="默认图片">
              <template slot-scope="{row,$index}">
                <img :src="row.skuDefaultImg" style="width:60px;height:60px">
              </template>
            </el-table-column>
        </el-table>
      </el-dialog>
  </div>
</template>

<script>
import Spuform from './Spuform/index.vue'
import Skuform from './Skuform/index.vue'
export default {
    name:'Spu',
    data(){
      return{
        dialogTableVisible :false,
        idData:{},
        listDisplay:0,
        page:1,
        limit:3,
        total:0,
        tabData:[],
        supData:[],
        loading:true
      }
    },
    watch:{
      dialogTableVisible(){
        if(!this.dialogTableVisible){
          this.supData = [],
          this.loading = true
        }
      }
    },
    components:{Spuform,Skuform},
    methods:{
    async getFindSpuld(row){
      this.dialogTableVisible = true
      const result = await this.$API.spu.reqFindSpuld(row.id)
      if(result.code == 200){
        this.supData = result.data
        this.loading = false
      }
    },
    async addSkuList(row){
      await this.$refs.SkuForm.getSkuData(row,this.idData)
      this.$refs.SkuForm.spuName = row.spuName
      this.listDisplay=2
    },
    async getDelData(row){
      const result = await this.$API.spu.reqDelSpu(row.id)
      if(result.code == 200){
        this.getDataList((this.tabData.records.length > 1&&this.tabData.current > 1)?this.tabData.current - 1:undefined)
      }
    },
    //接收子组件传递的数据
    async setAttributeData(data=''){
        this.idData = {}
        if(data){
          this.idData = data
          await this.getDataList()
        }else{
          this.tabData = []
        }
    },
    //接收并判断完毕

    //axios发送请求成功的函数开始
    async getDataList(page=this.page){
      let {limit}=this
      let category3Id = this.idData.threeRegion
      try{
        const result = await this.$API.spu.reqPageSpu(page,limit,category3Id)
          if(result.code == 200){
            this.total = result.data.total
            this.tabData = result.data
            return
      }else{
        this.$message.error(`请求发送成功了数据出错,理由是: ${result.data}`)
      }
      }catch(err){
        this.$message.error(`请求发送失败,理由是: ${err}`)
      }
    },
    //axios发送请求成功的函数结束

    //改变页面显示状态并发送请求
    async changeSpuDisplay(value,row='',id){
      if(this.$refs['SpuForm']){
      this.listDisplay = value;
      this.$nextTick(function(){
        this.$refs['SpuForm'].getSpuMsg(row)
      })
      this.$refs['SpuForm'].supData.category3Id = id;
      }
    }
    //改变页面显示状态结束

    },
    mounted(){
      this.$bus.$on('changeSpuDisplay',this.changeSpuDisplay)
      this.$bus.$on('getDataList',this.getDataList)
      this.$bus.$on('esayChange',(vlaue)=>{
        this.listDisplay = vlaue
      })
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>